.settingsPanel {
  --vertical-gap: var(--vertical-spacing);
  display: flex;
  flex-direction: column;
  padding-inline: calc(var(--horizontal-spacing) - 2px);
  padding-block: var(--vertical-gap);
  height: 100%;
}

.currentElementAbout {
  /* Don't let the path size change */
  flex-shrink: 0;
  /* Add padding on the bottom so our whitespace on top and bottom is equal */
  /* padding-bottom: var(--vertical-gap); */
}

form.settingsForm {
  flex: 1;
  height: 100%;
  overflow: auto;
  isolation: isolate;
}

.settingsInputs {
  overflow: auto;
}

.buttonsHolder {
  margin-top: auto;
  background-color: var(--light-grey);
  padding-block: var(--vertical-gap);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: var(--vertical-spacing);
}

.buttonsHolder > Button {
  height: 40px;
  width: 100%;
  border: none;
}

.validationErrorMsg {
  padding: 0.5rem;
  color: var(--red);
  font-family: var(--mono-fonts);
}
